import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { IWorkItem, getUserWorksFavorite } from '../../api/threeApi';

interface IPropsIndex
	extends RouteComponentProps<{
		uid: string;
	}> {}

export default function Favorite(props: IPropsIndex) {
	const [dataList, setDataList] = useState<IWorkItem[]>([]);

	useEffect(() => {
		const uid = props.match.params.uid;
		getUserWorksFavorite({
			offset: 0,
			limit: 10,
			uid,
		})
			.then((res) => {
				console.log(res);
				setDataList(res.items);
			})
			.catch((err) => {});
	}, []);
	return (
		<div className="d-f fw">
			{dataList.map((item) => (
				<div
					className="cp mr24 mt32"
					key={`work${item.id}`}
					onClick={() => {
						props.history.push(`/workDetail/${item.id}`);
					}}
				>
					<div className="w156 h156 bg-theme2 br0 ov-h">
						<img className="w100" src={item.cover} alt="" />
					</div>
					<div className="strong pt8">{item.name}</div>
					<div className="d-f ac pt8">
						<img className="mr12" src={require('../../image/good.png').default} alt="" />
						<span>{item.num_likes}</span>
						<img className="mlr12" src={require('../../image/eye.png').default} alt="" />
						<span>{item.num_views}</span>
					</div>
					<div className="d-f ac pt8 w156 ellip1">
						<img
							className="w32 br100"
							src={item.creator.avatar || require('../../image/user2.png').default}
						/>
						<span className="c-hint-b pl6 ellip1">{item.creator.name}</span>
					</div>
				</div>
			))}
		</div>
	);
}
